<template>
  <el-main class="bg table_wrap offline_activities">
    <div class='div-form'>
      <el-form ref="elFormRef" :model="formInline" label-width="90px" :style="{ width: '100%' }" label-position="left">
        <el-row :gutter="20">
						<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="活动名称">
								<el-input v-model="formInline.event_name"></el-input>
							</el-form-item>
			</el-col>
								<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="活动类型">
								<el-select v-model="formInline.activity_type">
											</el-select>
							</el-form-item>
			</el-col>
											<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="活动日期">
								<el-input v-model="formInline.event_date"></el-input>
							</el-form-item>
			</el-col>
						        </el-row>
      </el-form>
    </div>
    <baseTable :tableColumns="columns" requestApi='/api/offline_activities/get_list' :isShowSelect="true" :vm="vm"
               v-model:isRefresh="isRefresh" :otherParams="formInline"
               @handleSelectionChange="handleSelectionChange"
               @handleCurrentChangeNew="handleCurrentChangeNew"
    >
      <!-- 头部按钮 -->
      <template #baseHeadFunt>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(true)">重置</el-button>
        <el-button
            v-if="$check_action('/offline_activities/table','del') || $check_action('/offline_activities/view','del')"
            class="search_btn_del" type="danger" @click="delInfo()">删除
        </el-button>
      </template>
      <!-- 操作 -->
      <template #baseTableFunt="{ scope }">
        <el-button type="primary" v-if="user_group == '管理员' || $check_action('/offline_activities/table','set')" size="small"
                    @click="router.push('./view?offline_activities_id='+scope.row.offline_activities_id)">详情
        </el-button>
          <el-button type="primary" size="small" v-if="$check_action('/offline_activities/table','set')"
                   @click="router.push('../comment/table?size=10&page=1&source_table=offline_activities&source_field=' + field + '&source_id=' + scope.row[field])">
          查看评论
        </el-button>
        </template>
      <template #baseTableFunt2="{ scope }">
        <el-button type="primary" v-if="user_group == '管理员' || $check_action('/offline_activities/table','set')" size="small"
            @click="router.push('./view?offline_activities_id='+scope.offline_activities_id)">详情
        </el-button>
      <el-button type="primary" size="small" v-if="$check_action('/offline_activities/table','set')"
               @click="router.push('../comment/table?size=10&page=1&source_table=offline_activities&source_field=' + field + '&source_id=' + scope[field])">
      查看评论
    </el-button>
        </template>
      <template #tableContent="{ scope, column }">
                                                <span v-if="column.prop === 'create_time'">{{formatDate(scope.row.create_time)}}</span>
        <span v-if="column.prop === 'update_time'">{{formatDate(scope.row.update_time)}}</span>
      </template>

      <template #tableContent2="{ scope, column }">

                                                                                                                                                                            <span v-if="column.prop === 'create_time'"> {{ column.label }}：{{formatDate(scope.create_time)}}</span>
        <span v-if="column.prop === 'update_time'"> {{ column.label }}：{{formatDate(scope.update_time)}}</span>
      </template>
    </baseTable>
            </el-main>
</template>
<script setup>
  import {useRouter} from "vue-router";

  let router = useRouter();
  import {
          $get_auth,
          func,
          paramsFun,
          $fullUrl,
          formatDate,
          $banseUrl,
          $check_action,
          $toTime,
  } from "@/utils/utils.js";
  import { $post, $get } from "@/api/Api.js";
  import {Picture} from "@element-plus/icons-vue";
  import {ElMessage} from "element-plus";
  import {ref, toRefs, computed, onMounted} from "vue"
  import storageHelper from '@/libs/StorageHelper'

  let user_group = storageHelper.getUserInfo().user_group;
  let table = ref("offline_activities")
  let field = ref("offline_activities_id")
  let url_get_list = ref("/api/offline_activities/get_list")
  let url_del = ref("/api/offline_activities/del")
  // 头部搜索// 搜索
  let formInline = ref({
          "event_name": "",
                "activity_type": "",
                  "event_date": "",
            "orderby": `create_time desc`
  })
        // 活动类型列表
  let list_activity_type = ref([""]);
  //获取活动类型
  let get_list_activity_type = async() =>{
    let json = await $get("/api/classification_information/get_list");
    if(json.result){
      list_activity_type.value = json.result.list;
    }
    else if(json.error){
      console.error(json.error);
    }
  }
                  let vm = ref({
                                                                    id: "offline_activities_id"
  })
  // 列名
  const columns =[
          {"prop": "event_name", "label": "活动名称",fieldType:1},
                {"prop": "activity_type", "label": "活动类型",fieldType:1},
                {"prop": "activity_description", "label": "活动描述",fieldType:1},
                {"prop": "event_date", "label": "活动日期",fieldType:1},
                {"prop": "number_of_applicants", "label": "报名人数",fieldType:1},
          {"prop": "create_time", "label": "创建时间",fieldType:3},
    {"prop": "update_time", "label": "更新时间",fieldType:3},
  ]
  // 刷新table
  let isRefresh = ref(false)
  //批量勾选数据框
  let selectList = ref([])
  //点击数据
  let currentRowTableProduct = ref({})
  let showModal = ref(false)
            // 关闭弹框
  let closeModal = () => {
    showModal.value = false;
  };
  //表格勾选回调
  let handleSelectionChange = (val) => {
    console.log(val)
    selectList.value = val.map((item) => {
      if (item.offline_activities_id !== undefined) {
        return item.offline_activities_id
      } else {
        return item
      }
    })
  }
  //点击当前行
  let handleCurrentChangeNew = (val) => {
    currentRowTableProduct.value = val
  }

  // 搜索
  let onSubmit = () => {
    isRefresh.value = true
  }
  // 重置
  let onReset = (refresh) => {
    formInline.value = {
                  "event_name": "",
                              "activity_type": "",
                                  "event_date": "",
                      "create_time": "",
      "orderby": `create_time desc`
    }
    isRefresh.value = refresh
  }
  // 批量删除删除
  let delInfo = () => {
    ElMessageBox.confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          selectList.value.map((item) => {
            delFun(item)
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作',
          })
        })
  }
// 调用删除方法
let delFun = (id) => {
  $get(url_del.value,{offline_activities_id: id}).then((json) => {
    if (json.result) {
      isRefresh.value = true;
      ElMessage.success("删除成功");
    } else if (json.error) {
      ElMessage.error(json.error);
    }
    isRefresh.value = true;
  });
};
  // 查询数组对象某个是否包含某个值,返回对应对象
  let getObj = (arr, val) => {
    let obj = arr.find((item) => item.user_id == val);
    if (obj) {
        return obj;
    } else {
        return "-";
    }
  };
  onMounted(() => {
                      })
</script>
<style lang="less" scoped>
  .div-form {
    padding: 10px;
  }
</style>